<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { addRecord, addTeacherSuggest, banAppointment, ClassList, gteConsultList, teacherList, viewRecordList } from '@/views/consult/gteConsult';
import { ElMessage } from 'element-plus';
// 未知
// const form = reactive({
//     name: '',
//     region: '',
//     date1: '',
//     date2: '',
//     delivery: false,
//     type: [],
//     resource: '',
//     desc: ''
// });
const textarea = ref('');

// 选项下拉框
const formInline = reactive({
    user: '',
    region: '',
    date: ''
});
// 日历
const value2 = ref('');
// 表格
const tableData = ref([]);
const Params = ref({
    endTime: '',
    pageNum: 1,
    pageSize: 10,
    /**
     * 班级名
     */
    psyClass: '',
    /**
     * 开始时间
     */
    startTime: '',
    /**
     * 预约状态的筛选条件(已到1,未到0)
     */
    statusType: 0,
    /**
     * 学生姓名
     */
    stuName: '',
    /**
     * 学号
     */
    stuNum: '',
    /**
     * 老师姓名
     */
    teacherName: ''
});

// 搜索
const TeacherName = ref('');
const ClassName = ref('');


function search() {
    gteConsultList(Params.value).then(res => {
        console.log(res);
        tableData.value = res.rows;
        total.value = res.total;
        timeTotal.value = res.total;
        minutesTotal.value = res.data.totalDuration;
        Params.value.teacherName = TeacherName.value;
        Params.value.psyClass = ClassName.value;
        tableData.value.map(item => {
            switch (item.status) {
                case '0':
                    return item.status = '未开始';
                    break;
                case '1':
                    return item.status = '待录档,';
                    break;
                case '2':
                    return item.status = '已完成';
                    break;
                case '3':
                    return item.status = '学生已取消';
                    break;
                case '4':
                    return item.status = '老师已取消';
                    break;

            }
        });
        tableData.value.map(item => {
            switch (item.arrive) {
                case '0':
                    return item.arrive = '未到';
                    break;
                case '1':
                    return item.arrive = '已到,';
                    break;
            }
        });

        tableData.value.map(item => {
            return item.updateTime = item.psyScheduling.date + ' ' + item.psyScheduling.startTime + '-' + item.psyScheduling.endTime;
        });


    });
}

// 显示
const visible = ref(false);
// 分页
const total = ref(0);
// 总咨询次数（请求数据条数）
const timeTotal = ref(0);
// 总时长
const minutesTotal = ref(0);
// 初始化
search();

// 重置
function reset() {
    Params.value.stuName = '';
    Params.value.stuNum = '';
    TeacherName.value = '';
    ClassName.value = '';
    search();
}

// 查看
const viewVisible = ref(false);
const viewTable = ref({});

function ViewBtn(data) {
    console.log(data);
    viewVisible.value = true;
    viewTable.value = data;
}

// 建议

const sugVisible = ref(false);
const suggest = ref({
    id: null,
    teacherSuggest: ''
});

const addSuggest = () => {
    addTeacherSuggest(suggest.value).then(res => {
        console.log(res);
        console.log(14);
        // 重新请求列表
        search();
    });
    sugVisible.value = false;
    ElMessage({
        message: '添加建议成功.',
        type: 'success'
    });
};

function sugBtn(data) {
    console.log(data.id);
    sugVisible.value = true;
    suggest.value = {
        // schedulingId: data.id,
        id: data.id,
        teacherSuggest: data.teacherSuggest
    };
    suggest.value.teacherSuggest = '';

}

// function () {

// }


// 禁用

const banVisible = ref(false);

const banData = ref({
    studentId: 0,
    durationHour: 0
});


const value = ref();

const banOptuions = [
    {
        value: '不禁用',
        label: '不禁用'
    },
    {
        value: '一周',
        label: '一周'
    },
    {
        value: '二周',
        label: '二周'
    },
    {
        value: '三周',
        label: '三周'
    },
    {
        value: '四周',
        label: '四周'
    }
];


function banDate(data: any) {
    banVisible.value = true;
    console.log(data);
    banData.value.studentId = data.psyStudent.id;
    console.log(data.id);
    banData.value.durationHour = value.value;
}


const banSave = () => {
    switch (value.value) {
        case '不禁用':
            banData.value.durationHour = 0;
            break;
        case '一周':
            banData.value.durationHour = 168;
            break;
        case '二周':
            banData.value.durationHour = 330;
            break;

        case '三周':
            banData.value.durationHour = 468;
            break;
        case '四周':
            banData.value.durationHour = 648;
            break;
    }

    banAppointment(banData.value).then(res => {
        console.log(res);
        search();
        banVisible.value = false;
    });
    ElMessage({
        message: '已设置禁用时长',
        type: 'success'
    });
};
const recordVisible = ref(false);


const RecordData = ref({
    // 预约id
    appointmentId: 0,
    /**
     * 来访者情绪表现
     */
    emotion: '',
    /**
     * 文件id
     */
    file: 0,
    /**
     * 来访者身体健康状况
     */
    health: '',
    id: 0,
    /**
     * 咨询印象
     */
    impression: '',
    /**
     * 处理级别
     */
    level: '',
    /**
     * 咨询过程
     */
    process: '',
    /**
     * 咨询效果与反馈(对应预约建议)
     */
    result: '',
    /**
     * 个案来源
     */
    source: '',
    /**
     * 来访者自述
     */
    statement: '',
    /**
     * 学生id(冗余字段)
     */
    studentId: 0,
    /**
     * 咨询目标
     */
    target: null,
    /**
     * 咨询师id(冗余字段)
     */
    teacherId: null,
    /**
     * 记录时间
     */
    time: null,
    /**
     * 个案类型
     */
    type: null
});

function recordBtn(data) {
    recordVisible.value = true;
    console.log(data.id);
    // RecordData.value.id = data.id;
}

function recordFile() {
    addRecord(RecordData.value).then(res => {
        console.log(res);
        RecordData.value.result = null;
        RecordData.value.emotion = null;
        RecordData.value.health = null;
        RecordData.value.statement = null;
        RecordData.value.process = null;
        RecordData.value.impression = null;
        RecordData.value.target = null;
        RecordData.value.type = null;
        RecordData.value.level = null;
        RecordData.value.source = null;
        recordVisible.value = false;
        ElMessage({
            message: '添加录档成功.',
            type: 'success'
        });
    });
}

// 咨询记录
const RecordVisible = ref(false);
const RecordList = ref({
    pageNum: 1,
    pageSize: 10,
    studentId: null
});

function RecordBtn(data) {
    RecordVisible.value = true;
    RecordList.value.studentId = data.id;
    viewRecordList(RecordList.value).then(res => {
        console.log(res);
    });
}

// 下拉搜索框

// 咨询师列表
const Teacher = ref('');
teacherList().then(res => {
    console.log(res);
    Teacher.value = res.rows;
});

//班级列表
const Class = ref('');
ClassList().then(res => {
    console.log(res);
    Class.value = res.rows;
});

const StatusList = [
    {
        value: '0',
        label: '未到'
    },
    {
        value: '1',
        label: '已到'
    }

];
</script>

<template>
    <div class='container'>
        <div class='header'>
            <!--    <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
            <div class='inputBox'>
                <span><b>学生姓名</b></span>
                <el-form-item>
                    <el-input v-model='Params.stuName' placeholder='请输入学生姓名' clearable />
                </el-form-item>
            </div>
            <div class='inputBox'>
                <span><b>班级</b></span>
                <el-form-item>
                    <el-select
                        v-model='ClassName'
                        placeholder='全部'
                        clearable
                    >
                        <el-option
                            v-for='item in Class'
                            :key='item.id'
                            :value='item.name
'
                            :label='item.name
'
                        />
                    </el-select>
                </el-form-item>
            </div>
            <div class='inputBox'>
                <span><b>学号</b></span>
                <el-form-item>
                    <el-input v-model='Params.stuNum' placeholder='请输入学号' clearable />
                </el-form-item>
            </div>
            <!--            <div class='inputBox'>-->
            <!--                <span><b>咨询时间</b></span>-->
            <!--                <div class='block'>-->
            <!--                    <el-date-picker-->
            <!--                        v-model='value2'-->
            <!--                        type='datetimerange'-->
            <!--                        start-placeholder='Start date'-->
            <!--                        end-placeholder='End date'-->
            <!--                        format='YYYY-MM-DD HH:mm:ss'-->
            <!--                        date-format='YYYY/MM/DD ddd'-->
            <!--                        time-format='A hh:mm:ss'-->
            <!--                    />-->
            <!--                </div>-->
            <!--            </div>-->
            <div class='inputBox'>
<!--                <span><b>赴约状态</b></span>-->
<!--                <el-form-item>-->
<!--                    <el-select-->
<!--                        v-model='formInline.region'-->
<!--                        placeholder='全部'-->
<!--                        clearable-->
<!--                    >-->
<!--                        <el-select-->
<!--                            v-model='value'-->
<!--                            placeholder='全部'-->
<!--                            clearable-->
<!--                        >-->
<!--                            <el-option-->
<!--                                v-for='item in StatusList'-->
<!--                                :key='item.value'-->
<!--                                :value='item.value'-->
<!--                                :label='item.label'-->
<!--                            />-->
<!--                        </el-select>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
            </div>
            <!--        <section>-->
            <div class='inputBox'>
                <span><b>咨询师</b></span>
                <el-form-item>
                    <el-select
                        v-model='TeacherName'
                        placeholder='全部'
                        clearable
                    >
                        <el-option
                            v-for='item in Teacher'
                            :key='item.teacherId'
                            :value='item.nickName'
                            :label='item.nickName'
                        />
                    </el-select>
                </el-form-item>
            </div>

            <div class='inputBox'>
                <el-button @click='reset'>重置</el-button>
                <el-button type='primary' @click='search'>搜索</el-button>
            </div>
            <!--        </section>-->
        </div>
        <!--    </el-form>-->
        <p>统计:咨询时长：{{ minutesTotal }}分钟&nbsp;&nbsp;&nbsp;咨询次数：{{ timeTotal }}</p>
        <!--        表格-->
        <el-table :data='tableData' style='width: 100%' border>
            <el-table-column fixed label='序号' width='80' align='center' type='index' />
            <el-table-column prop='psyStudent.name' label='学生姓名' width='80' align='center' />
            <el-table-column prop='psyStudent.phoneNumber' label='手机号' width='80' align='center' />
            <el-table-column prop='psyClass.name' label='班级' width='90' align='center' />
            <el-table-column prop='psyStudent.stuNum' label='学号' width='90' align='center' />
            <el-table-column prop='psyTeacher.name' label='咨询师' width='90' align='center' />
            <el-table-column prop='content' label='问题描述' align='center' />
            <el-table-column prop='updateTime' label='咨询时间' width='100' align='center' />
            <el-table-column prop='mode' label='资讯类型' width='90' align='center' />
            <el-table-column prop='duration' label='咨询时长' width='90' align='center' />
            <el-table-column prop='psyStudent.remainingForbiddenHour' label='禁用剩余时长' width='110' align='center' />
            <el-table-column prop='arrive' label='赴约状态' width='90' align='center' />
            <el-table-column prop='status' label='咨询状态' width='90' align='center' />
            <el-table-column fixed='right' label='操作' width='140' align='center'>
                <template #default='scope'>
                    <el-button link type='primary' size='small' @click=sugBtn(scope.row)>
                        建议
                    </el-button>
                    <el-button link type='primary' size='small' @click='ViewBtn(scope.row)'>查看</el-button>
                    <el-button link type='primary' size='small' @click='banDate(scope.row)'>禁用</el-button>
                    <el-button link type='primary' size='small' @click='recordBtn(scope.row)'>录档</el-button>
                    <el-button link type='primary' size='small' @click='RecordBtn(scope.row)'>记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--咨询记录-->
        <el-dialog
            v-model='RecordVisible'
            title='咨询记录'
            width='700'
            align-center
        >
            <div class='recordBox'>
                <div><span>心理咨询老师<span></span></span><span>咨询方式：<span></span></span><span>日期</span></div>
                <div><span>问题描述</span>
                    <span></span>
                </div>
            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='RecordVisible = false'>取消</el-button>
                    <el-button type='primary' @click='RecordVisible=false'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 录档对话框-->
        <el-dialog
            v-model='recordVisible'
            title='建议信息'
            width='800'
            align-center
        >
            <div style='margin: 10px 0'>基本信息</div>
            <table class='record'>
                <tr>
                    <td>既往病史</td>
                    <td><input type='text'></td>
                    <td>心理诊断</td>
                    <td><input type='text'></td>
                    <td>服药情况</td>
                    <td><input type='text'></td>
                </tr>
                <tr>
                    <td>家庭情况</td>
                    <td><input type='text'></td>

                    <td>其他</td>
                    <td colspan='3'>
                        <input type='text'>

                    </td>
                </tr>
                <tr>
                    <td>个案类型</td>
                    <td><input
                        v-model='RecordData.type'
                        type='text'></td>

                    <td>个案来源</td>
                    <td><input
                        v-model='RecordData.source'
                        type='text'></td>

                    <td>处理级别</td>
                    <td><input
                        v-model='RecordData.level'
                        type='text'></td>

                </tr>
            </table>
            <div style='margin: 10px 0'>咨询内容</div>
            <table class='record second'>
                <tr>
                    <td>来访者情绪表现</td>
                    <td><input
                        v-model='RecordData.emotion'
                        type='text'
                    ></td>
                </tr>
                <tr>
                    <td>来访者身体健康状况、仪表、神态、体态</td>
                    <td><input
                        v-model='RecordData.health'
                        type='text'></td>
                </tr>
                <tr>
                    <td>来访者自述（包括近期状况、人际关系、成长中的相关重要事件等）</td>
                    <td><input
                        v-model='RecordData.statement'
                        type='text'></td>
                </tr>
                <tr>
                    <td>咨询过程、方法和策略（重要的部分可粘贴逐字稿）</td>
                    <td><input
                        v-model='RecordData.process'
                        type='text'>
                    </td>
                </tr>
                <tr>
                    <td>咨询印象（问题类型、程度、原因）</td>
                    <td><input
                        v-model='RecordData.impression'
                        type='text'></td>

                </tr>
                <tr>
                    <td>咨询目标（近期、远期）</td>
                    <td><input
                        v-model='RecordData.target'
                        type='text'></td>

                </tr>
                <tr>
                    <td>咨询效果评估与反馈</td>
                    <td><input
                        v-model='RecordData.result'
                        type='text'></td>

                </tr>
            </table>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='recordVisible = false'>取消</el-button>
                    <el-button type='primary' @click='recordFile'>
                        确定
                    </el-button>
                </div>
            </template>

        </el-dialog>
        <!--建议-->
        <el-dialog
            v-model='sugVisible'
            title='建议信息'
            width='700'
            align-center
        >
            <el-input
                v-model='suggest.teacherSuggest'
                resize='none'
                style='width:100%'
                :rows='15'
                maxlength='500'
                show-word-limit
                type='textarea'
                placeholder='填写日常反馈信息'
            />
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='sugVisible = false'>取消</el-button>
                    <el-button type='primary' @click='addSuggest()'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--禁用-->
        <el-dialog
            v-model='banVisible'
            title='设置禁用时长'
            width='250'
        >
            <div>
                <el-form-item>
                    <el-select v-model='value' placeholder='不禁用' style='width:100%'>
                        <el-option
                            v-for='item in banOptuions'
                            :key='item.value'
                            :label='item.label'
                            :value='item.value'
                        />
                    </el-select>
                </el-form-item>
            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='banVisible = false'>取消</el-button>
                    <el-button type='primary' @click='banSave'>
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--查看-->
        <el-dialog
            v-model='viewVisible'
            title='查看消息'
            width='500'
            align-center
        >
            <div>
                <section>
                    <table>
                        <tbody>
                        <tr>
                            <td>姓名</td>
                            <td>{{ viewTable.psyStudent.name }}</td>
                            <td>班级</td>
                            <td>{{ viewTable.psyClass.name }}</td>
                        </tr>
                        <tr>
                            <td>学号</td>
                            <td>{{ viewTable.psyStudent.stuNum }}</td>
                            <td>咨询师</td>
                            <td>{{ viewTable.psyTeacher.name }}</td>
                        </tr>
                        <tr>
                            <td>资讯类型</td>
                            <td>{{ viewTable.mode }}</td>
                            <td>赴约状态</td>
                            <td>{{ viewTable.arrive }}</td>
                        </tr>
                        <tr>
                            <td>
                                咨询时间
                            </td>
                            <td colspan='3'>{{ viewTable.updateTime }}</td>
                        </tr>
                        <tr>
                            <td>问题描述</td>
                            <td colspan='3'>{{ viewTable.content }}</td>
                        </tr>
                        <tr>
                            <td>学生反馈</td>
                            <td colspan='3'></td>
                        </tr>
                        </tbody>

                    </table>
                </section>
            </div>

        </el-dialog>
        <div id='page'>
            <el-pagination
                v-model:current-page='Params.pageNum'
                v-model:page-size='Params.pageSize'
                background
                layout='prev, pager, next'
                :total=total
                @currentChange='search'
            />
        </div>
    </div>

</template>
<style lang='scss'>
.recordBox {
    width: 100%;
    border: 1px solid black;
    padding: 10px 20px;

    div {
        display: flex;
        justify-content: space-between;
        //margin-left:10px;
        margin-top: 10px;
    }
}

#page {
    display: flex;
    justify-content: right;
    margin: 40px 20px;
}

.inputBox {
    display: flex;
    //align-items: center;
    margin: 5px;
    line-height: 30px;

    button {
        width: 50px
    }

    b {
        margin: 0 20px 10px 0;
    }
}

p {
    margin: 20px 0;
}

.container {
    padding: 40px;
}

.header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.el-select {
    width: 100%;
}

//section {
//    width: 100%;
//    display: flex;
//    justify-content: space-between;
//}

//.demo-form-inline .el-input {
//    --el-input-width: 220px;
//}
//
//.demo-form-inline .el-select {
//    --el-select-width: 220px;
//}

.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

.line {
    width: 1px;
    background-color: var(--el-border-color);
}

.el-dialog {
    table {
        width: 100%;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-spacing: 0; /*去掉单元格间隙*/
        td {
            text-align: center;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 10px;
        }

        td:nth-of-type(2n+1) {
            background-color: #F2F3F4;
        }
    }
}

.record input {
    outline: none;
    width: 100%;
    padding: 0 10px;
}

.record.second tr {
    td:nth-of-type(2n+1) {
        width: 285px;
        background-color: white;
    }
}

</style>
